<template>
	<view>
		<!-- 顶部导航 -->
		<view class="topTabBar">
			<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @click="showType(tbIndex)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid.title}}</view>
			</view>
		</view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
			<view class="list">
				<view class="onorder" v-if="list.length==0">
					<image src="../../static/noorder.png"></image>
					<view class="text">
						没有相关订单
					</view>
				</view>
				<view class="row" v-for="(row,index) in list" :key="index">
					<view class="type">订单号: {{row.number}}</view>
					<view class="order-info" @click="goOrderDetail(row.id)">
						<view class="left">
							<image :src="row.order_goods[0].goods_snapshot.cover_info.url"></image>
						</view>
						<view class="right">
							<view class="name">
								{{row.order_goods[0].goods_snapshot.name}}
							</view>
							<view class="price-number">
								订单状态：<view class="price">{{row.order_status_info.name}}</view>
							</view>
						</view>
						
					</view>
					<view class="detail">
						<view class="number">共{{row.order_goods.length}}件商品</view><view class="sum">合计￥<view class="price">{{row.total_price}}</view></view><view class="nominal"></view>
					</view>
					<view class="btns">
						<block>
							<view class="default" v-if="row.status === 0 || row.status === 1 || row.status === 4" @click="deleteRquest(row.id)">删除</view>
							<view class="default" v-if="row.status === 1" @click="goRequest(row.id, 0, '你确定取消订单吗？取消后订单不可其他操作了。')">取消订单</view>
							<view class="pay" v-if="row.status === 1" @click="goRequest(row.id, 2, '你确定立即支付吗？')">付款</view>
							<view class="pay" v-if="row.status === 3" @click="goRequest(row.id, 4,'你确定立即收货订单吗？确定后订单交易完成。')">确认收货</view>
						</block>
					</view>
				</view>
				<uni-load-more v-if="list.length!=0" :status="loadMoreStatus"></uni-load-more>
			</view>
		</view>
		<!--操作-->
		<view>
			<neil-modal
					:show="visibleModal"
					@close="closeModal"
					title="提示"
					:content="modelContent"
					@cancel="goToRequest(false)"
					@confirm="goToRequest(true)">
			</neil-modal>
		</view>
		<view>
			<neil-modal
					:show="visibleModal1"
					@close="closeModal"
					title="提示"
					content="你确定删除吗？删除后无法查看到订单的详情。"
					@cancel="goDeleteRquest(false)"
					@confirm="goDeleteRquest(true)">
			</neil-modal>
		</view>
	</view>
</template>
<script>
    import { order } from '../../common/config'
    import uniLoadMore from "@/components/uni-load-more"
    import neilModal from '@/components/neil-modal.vue';
	export default {
        components: {uniLoadMore,neilModal},
		data() {
			return {
                visibleModal:false,
                visibleModal1:false,
                modelContent:'加载中……',
				delete_order_id: 0,
				requestData:{
                    update_order_id: 0,
					status:-1
				},
                //订单状态，0:已取消，1:待付款，2:已付款(待发货)，3:已发货，4:已收货（完成
				orderType: [
					{status: -1, page: 1, title: '全部'},
					{status: 0, page: 1, title: '已取消'},
					{status: 1, page: 1, title: '待付款'},
					{status: 2, page: 1, title: '待发货'},
					{status: 3, page: 1, title: '已发货'},
					{status: 4, page: 1, title: '完成'}
				],
				//订单列表 演示数据
				orderList:[
					[], [], [], [], [], []
				],
				list:[
                    {	id:0,
                        order_status_info:{name:'加载中……'},
                        order_goods:[
							{goods_snapshot:{cover_info:{url:''}}}
						],
                        total_price:100,
                    }
				],
				tabbarIndex:0,
                loadMoreStatus:'more',
			};
		},
		onLoad(option) {
			//option为object类型，会序列化上个页面传递的参数
			// console.log("option: " + JSON.stringify(option));
            let tbIndex = parseInt(option.tbIndex);
            this.tabbarIndex = tbIndex;
            this.loadData();
			this.list = this.orderList[tbIndex];
		},
        //上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
        onReachBottom(){
            this.loadMoreStatus = 'loading';
            this.loadData()
        },
		methods: {
            closeModal(){
                this.visibleModal = false;
                this.visibleModal1 = false;
            },
            /**
             * 删除订单
             * @param status
             * @param msg
             */
            deleteRquest(order_id){
                this.delete_order_id = order_id;
                this.visibleModal1 = true;
            },
            async goDeleteRquest(isGo){
                if (isGo) {
                    await this.$api.MyRequest(order.DeleteOrder.url + this.delete_order_id, order.DeleteOrder.method)
                        .then(res => {
                            this.orderType[this.tabbarIndex].page =  1;
                            this.orderList[this.tabbarIndex] = [];
                            this.list = [];
                            this.loadData()
                        })
                        .catch(err => {
                        })
                }
            },
            /**
             * 修改订单状态
             * @param status
             * @param msg
             */
            goRequest(oreder_id, status, msg){
                this.requestData.update_order_id = oreder_id;
                this.visibleModal = true;
                this.modelContent = msg;
                this.requestData.status = status;
            },
            async goToRequest(isGo){
                if (isGo) {
                    await this.$api.MyRequest(order.PutOrder.url + this.requestData.update_order_id, order.PutOrder.method, this.requestData)
                        .then(res => {
                            this.orderType[this.tabbarIndex].page =  1;
                            this.list = [];
                            this.loadData();
                        })
                        .catch(err => {
                        })
                }
            },
            /**
			 * 切换选项卡
             * @param tbIndex
             */
			showType(tbIndex){
				this.tabbarIndex = tbIndex;
                if (this.orderList[tbIndex].length === 0) {
                    this.loadData();
                    this.list = this.orderList[tbIndex];
                } else {
                    this.list = this.orderList[tbIndex];
				}
			},
            /**
             * 加载数据
             * @param tbIndex
             */
            async loadData() {

                let data = {
                    page: this.orderType[this.tabbarIndex].page,
					status: this.orderType[this.tabbarIndex].status,
                };
                if (data.status === -1) {
                    delete data.status;
				}

                await this.$api.MyRequest(order.GetOrder.url, order.GetOrder.method, data)
                    .then(res => {
                        if (res.data.length != 0) {
                            this.orderType[this.tabbarIndex].page = res.current_page + 1;
                            this.orderList[this.tabbarIndex] = this.orderList[this.tabbarIndex].concat(res.data);
                            this.list = this.orderList[this.tabbarIndex];
                            this.loadMoreStatus = 'more'
                            this.$forceUpdate();
                        } else {
                            this.loadMoreStatus = 'noMore'
                        }
                    })
                    .catch(err => {
                    });
            },

            goOrderDetail(id) {
                uni.navigateTo({
                    url: '/pages/order/order_detail?id='+id
                })
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f3f3f3;
}
.topTabBar{
	width: 100%;
	position: fixed;
	top: 0;
	/* #ifdef H5 */
	top: 80upx;
	/* #endif */
	z-index: 10;
	background-color: #f8f8f8;
	height: 80upx;
	display: flex;
	justify-content: space-around;
	.grid{
		width: 20%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #444;
		font-size: 28upx;
		.text{
			height: 76upx;
			display: flex;
			align-items: center;
			&.on{
				color: #f06c7a;
				border-bottom: solid 4upx #f06c7a;
			}
		}
		
	}
}
.order-list{
	margin-top: 80upx;
	padding-top: 20upx;
	width: 100%;
	.list{
		width: 94%;
		margin: 0 auto;
		.onorder{
			width: 100%;
			height: 50vw;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;
			image{
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}
			.text{
				width: 100%;
				height: 60upx;
				font-size: 28upx;
				color: #444;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.row{
			/*width: calc(100% - 40upx);*/
			padding: 10upx 20upx;
			border-radius: 10upx;
			background-color: #fff;
			margin-bottom: 20upx;
			.type{
				font-size: 26upx;
				color: #ec652f;
				height: 50upx;
				display: flex;
				align-items: center;
			}
			.order-info{
				width: 100%;
				display: flex;
				.left{
					flex-shrink: 0;
					width: 25vw;
					height: 25vw;
					image{
						width: 25vw;
						height: 25vw;
						border-radius: 10upx;
					}
				}
				.right{
					width: 100%;
					margin-left: 10upx;
					position: relative;
					.name{
						width: 100%;
						font-size: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.spec{
						color: #a7a7a7;
						font-size: 22upx;

					}
					.price-number{
						position: absolute;
						bottom: 0;
						width: 100%;
						display: flex;
						justify-content: flex-end;
						font-size: 22upx;
						color: #333;
						display: flex;
						align-items: flex-end;
						.price{
							font-size: 24upx;
							margin-right: 5upx;
						}

					}
				}
			}
			.detail{
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				height: 60upx;
				font-size: 26upx;
				.sum{
					padding: 0 8upx;
					display: flex;
					align-items: flex-end;
					.price{
						font-size: 30upx;
					}
				}
				
			}
			.btns{
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				view{
					min-width: 120upx;
					height: 50upx;
					padding: 0 20upx;
					border-radius: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28upx;
					margin-left: 20upx;
				}
				.default{
					border: solid 1upx #ccc;
					color: #666;
				}
				.pay{
					border: solid 1upx #ec652f;
					color: #ec652f;
				}
			}
		}
	}
}
</style>
